<template>
	<view class="wrap">
		<image class="logo" src="@/static/images/logo.png" mode="widthFix"></image>
		
		<view v-if="loginType == 'wxUser'" class="formsBox">
			<view class="forms">
				<view class="account">
					<!-- <view class="icon"></view> -->
					<u-input class="el-input" v-model="loginParam.job" type="text" :border="false" placeholder='用户名' :clearable='false'></u-input>
					<!-- <uni-easyinput v-model="loginParam.job" placeholder="用户名" :inputBorder="false" ></uni-easyinput> -->
				</view>
				<view class="account pwd">
					<!-- <view class="icon"></view> -->
					<u-input class="el-input" v-model="loginParam.password" type="password" :border="false" placeholder='密码' :clearable='false'></u-input>
					<!-- <uni-easyinput type='password' v-model="loginParam.password" placeholder="密码" :inputBorder="false" /> -->
				</view>
			</view>
			<view class="tips">{{tips}}</view>
			<view class="buttonBox">
				<button class="getPhone" @click="login">登录</button>
				<button class="getPhone back" @click="loginback">退出登录</button>
			</view>
			<!-- <view class="login-bottom-box">
				<view class="copyright">
					登录即代表您已阅读并同意<u-link href="#">用户协议</u-link> 与 <u-link href="#">隐私政策</u-link>
				</view>
			</view> -->
		</view>
	</view>
</template>
<script>
	import base64 from '@/common/base64.js';
	export default {
		data() {
			return {
				loginType: 'wxUser',
				isReg: false,
				openId: '',
				tips: '',
				loginParam: {
					job: "",
					password: ""
				}
			};
		},
		onLoad() {

		},
		methods: {
			gotoHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			loginback() {
				uni.navigateBack()
			},
			login() {
				if (this.loginParam.job == '' || this.loginParam.password == '') {
					this.tips = '请输入用户名和密码';
					return
				}
				this.tips=''
				wx.login({
					success: (res) => {
						if (res.errMsg === 'login:ok') {
							this.$u.api.getOpenId(res.code).then(openidRes => {
								this.openId = openidRes.openid;
								const par = {
									openid: this.openId,
									param: JSON.stringify(this.loginParam)
								}
								this.$u.api.login(par).then(loginRes => {
									console.log(loginRes);
									if (loginRes.code == 200) {
										uni.setStorageSync('openid', openidRes.openid);
										uni.setStorageSync('userInfo', loginRes.userInfo);
										uni.showToast({
											title: '登录成功',
											icon: 'none'
										});
										setTimeout(() => {
											this.gotoHome()
										}, 500)
									} else {
										uni.showToast({
											title: '账号信息错误',
											icon: 'none'
										});
									}
								})
							})
						}
					}
				})
			},
		}
	};
</script>
<style>
	.uni-easyinput__content{
		background-color: #fff0 !important;
	}
</style>
<style lang="scss" scoped>
	@import 'index.scss';

	.logo {
		text-align: center;
		width: 80%;
		font-size: 64rpx;
		color: #5473e8;
		margin: 0rpx auto 0 auto;
	}
	.formsBox{
		position: fixed;
		bottom: 100rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.tips {
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 24rpx;
		height: 24rpx;
		color: #f00;
		margin-bottom: 20rpx;
		text-align: center;
	}

	.forms {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 23rpx;

		.account {
			width: 647rpx;
			height: 80rpx;
			border: 1rpx solid #bbb;
			border-radius: 40rpx;
			// background-color: #aaa;
			display: flex;
			align-items: center;

			.icon {
				width: 37rpx;
				height: 37rpx;
				background: url("@/static/images/accountIcon.png") no-repeat center;
				background-size: 100% 100%;
				margin: 0 50rpx;
			}
			.el-input{
				width: 100%;
				color: #000;
				padding: 0 40rpx;
				box-sizing: border-box;
			}
		}

		.pwd {
			.icon {
				width: 31rpx;
				height: 38rpx;
				background: url("@/static/images/pwdIcon.png") no-repeat center;
				background-size: 100% 100%;
			}
		}
	}

	.buttonBox {
		width: 100%;
		margin-top: 20rpx;
		position: relative;

		.getPhone {
			width: 15.36rem;
			border: 0;
			font-size: 0.853rem;
			height: 2.66rem;
			line-height: 2.66rem;
			border-radius: 1.33rem;
			color: #fff;
			background-color: #05c;
		}

		.back {
			background-color: #ccc;
			margin-top: 20rpx;
			color: #000;
		}

		.buttonmask {
			width: 15.36rem;
			height: 2.66rem;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translate(-50%, 0);
		}

		.checkboxgroup {
			// width: 100%;
			display: flex;
			justify-content: center;
		}

		.fwtl {
			color: blue;
		}
	}
</style>